
// format id/top/left

var size1 = ['1/0/0','2/0/0'];

var size2 = ['1/5/0','2/72/0','3/-12/0'];

var size3 = ['1/5/0','2/60/23','3/50/-23','8/-20/0'];

var size4 = ['1/5/0','2/72/0','3/29/25.5','4/20/-25','8/-25/0'];

var size5 = [ '1/5/0', '2/30/25', '3/60/16', '5/55/-16',
      		 '7/0/-27', '8/-50/0' ];

var size6 = ['1/5/0','2/16/23','3/45/23','4/55/0','5/28/-23','6/-20/-23','7/-35/0'];

var size7 = [ '1/5/0', '2/10/21', '3/31/27', '4/43/11.5', '5/30/-11.5',
        		'6/-10/-27', '7/-57/-22', '8/-50/0' ];

var size8 = [ '1/5/0', '2/8/19', '3/28/27', '4/47/19', '5/47/0', '6/28/-19',
      		'7/-10/-27', '8/-47/-19', '8/-45/0' ];

var x = 1;

function joinGroup() {
	reply = confirm("Do you want to join this group?");
	if (reply == true) {
		displayImage(8);
	}
}

function allowDrop(ev) {
	ev.preventDefault();
}

function drop(ev) {
	ev.preventDefault();
	window.confirm('Request to join this Group?');
	displayImage(8);
}

function disp1(group,size) {
	displayName(size);
}

function displayName(groupNames) {
	var group=groupNames.split('/');
	var size=group.pop();
	var div = document.getElementById("group");
	div.style.display = 'block';
	div.style.backgroundImage = "url(groupimages/grpsize" + size + ".png)";
	var i = 1;
	var layout = '';
	for (i = 1; i <= size; i++) {
		switch (size) {
		case '1':
			layout = size1[i - 1].split('/', 3);
			break;
		case '2':
			layout = size2[i - 1].split('/', 3);
			break;
		case '3':
			layout = size3[i - 1].split('/', 3);
			break;
		case '4':
			layout = size4[i - 1].split('/', 3);
			break;
		case '5':
			layout = size5[i - 1].split('/', 3);
			break;
		case '6':
			layout = size6[i - 1].split('/', 3);
			break;
		case '7':
			layout = size7[i - 1].split('/', 3);
			break;
		case '8':
			layout = size8[i - 1].split('/', 3);
			break;
		case '9':
			layout = size9[i - 1].split('/', 3);
			break;
		case '10':
			layout = size10[i - 1].split('/', 3);
			break;
		}
		obj = document.getElementById("p" + i);
		obj.style.top = "" + layout[1] + "%";
		obj.style.left = "" + layout[2] + "%";
		var name=group[i-1].split(" ");
		if(name.length>1)
			obj.innerHTML=name[0]+'<br/>'+name[1];
		else
			obj.innerHTML=name[0]+'<br/>';
		if(size==1)
			obj.style.display = 'none';
		else
			obj.style.display = 'block';
	}
	switch (size) {
	case '1':
		layout = size1[i - 1].split('/', 3);
		break;
	case '2':
		layout = size2[i - 1].split('/', 3);
		break;
	case '3':
		layout = size3[i - 1].split('/', 3);
		break;
	case '4':
		layout = size4[i - 1].split('/', 3);
		break;
	case '5':
		layout = size5[i - 1].split('/', 3);
		break;
	case '6':
		layout = size6[i - 1].split('/', 3);
		break;
	case '7':
		layout = size7[i - 1].split('/', 3);
		break;
	case '8':
		layout = size8[i - 1].split('/', 3);
		break;
	case '9':
		layout = size9[i - 1].split('/', 3);
		break;
	case '10':
		layout = size10[i - 1].split('/', 3);
		break;
	}
	obj = document.getElementById('manager');
	obj.style.top = "" + layout[1] + "%";
	obj.style.left = "" + layout[2] + "%";
	obj.style.display = 'block';
	obj.innerHTML='Owner:<br/>'+group[i-1];
	for (i; i <= 10; i++) {
		obj = document.getElementById("p" + i);
		obj.style.display = 'none';
	}

}